<%--
  Created by IntelliJ IDEA.
  User: cos
  Date: 2022/6/10
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common/head.jsp" %>
<html>
<head>
    <title>首页</title>
</head>
<body>

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h1>首页哈哈哈</h1>
        <div>
            <button type='button' id="getDept" class='btn btn-primary' data-toggle='modal' data-target='#addModal' >新增员工数据</button>
        </div>
        <table class="table table-hover table-bordered table-striped">
            <thead>
            <tr>
                <td>员工编号</td>
                <td>员工姓名</td>
                <td>员工性别</td>
                <td>员工工资</td>
                <td>员工密码</td>
                <td>员工出生日期</td>
                <td>员工部门</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tb">

            </tbody>
            <tfoot >
                <tr class="text-center">
                    <td id="tf" colspan="8"></td>
                </tr>

            </tfoot>
        </table>
    </div>
</div>
<%-- 模态框 --%>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">新增员工</h4>
            </div>
            <div class="modal-body">
                <form id="addEmp">
                    <div class="form-group">
                        <label for="ename" class="control-label">员工名</label>
                        <input type="text" class="form-control" id="ename" name="ename">
                    </div>
                    <div class="form-group">
                        <label for="inlineRadio1" class="control-label">员工性别</label>
                        <label class="radio-inline">
                            <input type="radio" name="esex" id="inlineRadio1" checked value="男"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="esex" id="inlineRadio2" value="女"> 女
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="salary" class="control-label">员工工资</label>
                        <input type="number" class="form-control" id="salary" name="salary">
                    </div>
                    <div class="form-group">
                        <label for="pwd" class="control-label">员工密码</label>
                        <input type="password" class="form-control" id="pwd" name="pwd">
                    </div>
                    <div class="form-group">
                        <label for="bornDate" class="control-label">员工出生日期</label>
                        <input type="date" class="form-control" id="bornDate" name="bornDate">
                    </div>
                    <div class="form-group">
                        <label for="addDno" class="control-label">员工部门</label>
                        <select class="form-control " name="dno" id="addDno">
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="addBtn" class="btn btn-primary">新增</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="updateModalLabel">修改员工</h4>
            </div>
            <div class="modal-body">
                <form id="updateEmpForm">
                    <input type="hidden" name="eno" id="updateEno">
                    <div class="form-group">
                        <label for="ename" class="control-label">员工名</label>
                        <input type="text" class="form-control" id="updateEname" name="ename">
                    </div>
                    <div class="form-group">
                        <label for="inlineRadio1" class="control-label">员工性别</label>
                        <label class="radio-inline">
                            <input type="radio" name="esex" id="esexM" checked value="男"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="esex" id="esexFM" value="女"> 女
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="salary" class="control-label">员工工资</label>
                        <input type="number" class="form-control" id="updateSalary" name="salary">
                    </div>
                    <div class="form-group">
                        <label for="pwd" class="control-label">员工密码</label>
                        <input type="password" class="form-control" id="updatePd" name="pwd">
                    </div>
                    <div class="form-group">
                        <label for="bornDate" class="control-label">员工出生日期</label>
                        <input type="date" class="form-control" id="updateBornDate" name="bornDate">
                    </div>
                    <div class="form-group">
                        <label for="addDno" class="control-label">员工部门</label>
                        <select class="form-control " name="dno" id="updateDno">
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="updateBtn" class="btn btn-primary">新增</button>
            </div>
        </div>
    </div>
</div>
<script>

    function del(id,pageNum) {
        if (confirm("确认吗?真的这么残忍吗")) {
            $.ajax({
                type:"post",
                url:"/emp/del/"+id,
                success:function (result) {
                    if (result.code==1) {
                        //刷新当前页的数据
                        getPage(pageNum);
                    }else{
                        alert(result.msg);
                    }
                }
            })
        }
    }

    function getPage(page) {
        $.ajax({
            type: "get",
            url: "/emp/getEmpByPage?page=" + page,
            success: function (result) {
                if (result.code == 0) {
                    $("#tb").text("现在还没有数据呢~~~~")
                } else {
                    //有获取数据,把之前的数据清理
                    //empty 清空标签,作用就是把这个标签内所有子/子孙都清空
                    $("#tb").empty();
                    $("#tf").empty();
                    //获取pageInfo里面的集合数据
                    let data = result.data.list;
                    // alert(data);
                    for (let x in data) {
                        $("#tb").append("<tr>" +
                            "    <td>" + data[x].eno + "</td>" +
                            "    <td>" + data[x].ename + "</td>" +
                            "    <td>" + data[x].esex + "</td>" +
                            "    <td>" + data[x].salary + "</td>" +
                            "    <td>" + data[x].pwd + "</td>" +
                            "    <td>" + data[x].bornDate + "</td>" +
                            "    <td>" + data[x].dname + "</td>" +
                            "    <td>" +
                            "<a class='btn btn-danger' href='javascript:del("+data[x].eno+","+result.data.pageNum+")' role='button'>删除</a>" +
                            "<a type='button' href='javascript:updateEmp("+data[x].eno+")'  class='btn btn-primary'>修改</a>" +
                            "</td>" +
                            "</tr>");
                    }

                    var tool = "<nav aria-label='Page navigation'>" +
                        "<ul class='pagination'>" +
                        "<li>" +
                        "    <a href='javascript:getPage(1)' aria-label='Previous'>" +
                        "        <span aria-hidden='true'>首页</span>" +
                        "    </a>" +
                        "</li>" +
                        "<li>" +
                        "    <a href='javascript:getPage(" + result.data.prePage + ")' aria-label='Previous'>" +
                        "        <span aria-hidden='true'>&laquo;</span>" +
                        "    </a>" +
                        "</li>";
                    //循环遍历
                    // 获取分页条数据
                    let navigatepageNums = result.data.navigatepageNums;
                    for (let x in navigatepageNums) {
                        if (result.data.pageNum == navigatepageNums[x]) {
                            tool += "<li class='active'><a href='javascript:getPage(" + navigatepageNums[x] + ")'>" + navigatepageNums[x] + "</a></li>";
                        } else {
                            tool += "<li ><a href='javascript:getPage(" + navigatepageNums[x] + ")'>" + navigatepageNums[x] + "</a></li>";
                        }
                    }
                    tool += "<li>" +
                        "    <a href='javascript:getPage(" + result.data.nextPage + ")' aria-label='Next'>" +
                        "        <span aria-hidden='true'>&raquo;</span>" +
                        "    </a>" +
                        "</li>" +
                        "<li>" +
                        "    <a href='javascript:getPage(" + result.data.pages + ")' aria-label='Next'>" +
                        "        <span aria-hidden='true'>尾页</span>" +
                        "    </a>" +
                        "</li>" +
                        "</ul>" +
                        "</nav>";
                    // innerHTML
                    $("#tf").append(tool);
                }
            }
        })
    }
    function updateEmp(eno){
        $('#updateModal').modal('toggle');
        //访问emp 获取单个用户的数据
        $.ajax({
            type:"get",
            url:"/emp/getEmpByEno/"+eno,
            success:function (result) {
                if (result.code==1) {
                    let emp = result.data;
                    //一个个表单赋值
                    $("#updateEno").val(emp.eno);
                    $("#updateEname").val(emp.ename);
                    $("#updateSalary").val(emp.salary);
                    $("#updatePd").val(emp.pwd);
                    $("#updateBornDate").val(emp.bornDate);
                    //性别
                    if (emp.esex=='男') {
                        $("#esexM").prop("checked",true);
                        $("#esexFM").prop("checked",false);
                    }else{
                        $("#esexM").prop("checked",false);
                        $("#esexFM").prop("checked",true);
                    }
                    //部门编号
                    //获取修改框的部门下拉框数据
                    $("#updateDno").empty();
                    $.ajax({
                        type:"get",
                        url:"/dept/getAll",
                        success:function (result) {
                            if (result.code==1) {
                                let data = result.data;
                                for (let x in data) {
                                    if(emp.dno==data[x].dno){
                                        $("#updateDno").append("<option selected value='"+data[x].dno+"'>"+data[x].dname+"</option>")
                                    }else{
                                        $("#updateDno").append("<option value='"+data[x].dno+"'>"+data[x].dname+"</option>")
                                    }
                                }
                            }
                        }
                    })

                }else{
                    alert(result.msg);
                }
            }

        })
    }
    /* onload */
    $(function () {
        //进入页面加载完dom立即执行
        getPage(1);
        $("#getDept").click(function () {
            $.ajax({
                type:"get",
                url:"/dept/getAll",
                success:function (result) {
                    if (result.code==1) {
                        let data = result.data;
                        for (let x in data) {
                            $("#addDno").html("<option value='"+data[x].dno+"'>"+data[x].dname+"</option>")
                        }
                    }
                }
            })
        })
        $("#addBtn").click(function () {
            let empData = $("#addEmp").serialize();
            $.ajax({
                type:"post",
                url:"/emp/add",
                data:empData,
                success:function (result) {
                    if (result.code==1) {
                        alert(result.msg);
                        getPage(1);
                    }else{
                        alert(result.msg);
                    }
                    $('#addModal').modal('toggle');
                }
            })
        })
        $("#updateBtn").click(function () {
            let empData = $("#updateEmpForm").serialize();
            $.ajax({
                type:"post",
                url:"/emp/update",
                data:empData,
                success:function (result) {
                    if (result.code==1) {
                        alert(result.msg);
                        getPage(1);
                    }else{
                        alert(result.msg);
                    }
                    $('#updateModal').modal('toggle');
                }
            })
        })

    })


</script>
</body>
</html>
